<template>
  <div class="advance-table-body">
    <!--搜索栏-->
    <el-form class="search-form--inset" ref="elForm" :model="queryParams" inline size="small" label-width="100px" label-position="left">
    </el-form>
    <!--操作栏-->
    <div class="table-operator">
      <el-button type="primary" size="small" plain @click="clickBtnAdd">新增</el-button>
    </div>
    <!--表格-->
    <el-table
      class="k-table"
      ref="table"
      @selection-change="handleSelectionChange"
      :data="tableList"
      v-loading="loading"
    >
      <el-table-column label="协议类型" align="left" prop="protocolTypeLabel" min-width="100px" show-overflow-tooltip  />
      <el-table-column label="IP地址" align="left" prop="ip" min-width="100px" show-overflow-tooltip />
      <el-table-column label="端口号" align="left" prop="port" min-width="80" show-overflow-tooltip />
      <el-table-column label="账户" align="left" prop="account" show-overflow-tooltip min-width="100"/>
      <el-table-column label="密码" align="left" prop="pwd" min-width="100px" show-overflow-tooltip />
      <el-table-column label="状态" align="left" width="150" fixed="right">
        <template #default="{ row }">
          <el-switch active-value="0" inactive-value="1" v-model="row.status" @change="statusChange(row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="代理方式" align="left" width="150" fixed="right">
        <template #default="{ row }">
          <template v-if="row.proxyType=='1'">API代理 </template>
          <template v-if="row.proxyType=='2'">隧道代理 </template>
          <template v-if="row.proxyType=='3'">IP代理 </template>
        </template>


      </el-table-column>
      <el-table-column label="操作" align="left" width="150" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="clickBtnEdit(row)">编辑</el-button>
          <el-button type="text" style="color: orangered" @click="clickBtnDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <trust-pagination
      :total="total"
      :page-size.sync="queryParams.pageSize"
      :current-page.sync="queryParams.pageNum"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"></trust-pagination>
    <delegate-dialog ref="delegateDialogRef"></delegate-dialog>
  </div>
</template>
<script>
import { saTableMixin } from '@/views/custom/mixin/saTableMixin';
import ZDate from '@/views/custom/tool/z-date';
import request from '@/utils/request';
import DelegateDialog from '@/views/custom/delegateManagement/delegateDialog.vue';
export default {
  name: "paymentAccessConfiguration",//支付接入配置
  components: { DelegateDialog },
  mixins: [saTableMixin],
  data() {
    return {

    }
  },

  mounted() {
    this.requestData("/proxy_config/list","get",this.queryParams);
  },
  methods:{
    clickBtnAdd(){
      this.$refs.delegateDialogRef.openDiaolog(0,null,()=>{
        this.refreshTableData();
      })
    },
    clickBtnEdit(row){
      this.$refs.delegateDialogRef.openDiaolog(1,row.id,()=>{
        this.refreshTableData();
      })
    },
    clickBtnDel(row){
      this.$confirm('删除后无法恢复，是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.requestDataDel(row.id);
      })
    },
    //状态回调的变化
    statusChange(val){
      let parm = {
        id:val.id,
        status:val.status,
      }
      this.requestDataEdit(parm)
    },
    //网络-根据ID修改用户信息
    requestDataDel(id){
      this.loading = true;
      request({
        url:`/proxy_config/${id}`,
        method:'delete',
        data: {  },
      }).then(response =>{
        this.refreshTableData();
      })
    },
    //网络-修改: 根据ID修改代理配置信息
    requestDataEdit(parm){
      this.loading = true;
      request({
        url:`/proxy_config`,
        method:'put',
        data: parm,
      }).then(response =>{
        this.loading = false;
        this.$message.success(response.msg);
        this.refreshTableData();
      })
    },
  }
}
</script>
